<template>
  <!-- 顶部导航栏 -->
  <div style=" height: 100%;" class="clearfix price_box">
    <!-- 左侧废品类tab -->
    <div class="price_tip_tabs">
      <div class="price_tip_tabs_item"
           :class="index === active ? 'active' : ''"
           v-for="(wasteGroup, index) in this.$store.getters.wasteGroups"
           :key="wasteGroup.pollenClass.classNo" @click="changeWasteType(index)">
        <span class="price_left_arrow" v-if="index === active"></span>
        <span>{{ wasteGroup.pollenClass.className }}</span>
      </div>
    </div>
    <!-- 右侧废品列表容器 -->
    <div class="price_tip_tab_content">
      <div class="price_tip_tab_content_item clearfix" v-for="waste in this.$store.getters.wasteList" :key="waste.identityNo">
        <div class="pull-left item_img">
          <img v-lazy="waste.icon" alt="无图片">
        </div>
        <div class="item_text_container pull-left">
          <div class="text_title">
            {{ waste.subjectName }}
          </div>
          <!-- <div class="text_tip van-ellipsis">
            {{ waste.tip }}
          </div> -->
          <!-- 价格区间 -->
          <PriceRange :min="waste.lowPrice" :max="waste.highPrice" :showPriceText="false"></PriceRange>
        </div>
        <!-- <div class="item_handle_container pull-right">
          <i class="iconfont icon-jia" v-if="!waste.isAdd" @click="addWasteToSaleList(waste)"></i>
          <i class="iconfont icon-jian" v-if="waste.isAdd" @click="delWasteFromSaleList(waste)"/>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script type="text/babel">
  import PriceRange from '../../component/price/PriceRange';
  // import DropUp from '../../component/price/DropUp';
  export default {
    name: 'PriceIndex',
    components: { PriceRange },
    data() {
      return {
        active: 0, // 指明哪一项废品类被选中
      };
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData() {
        // TODO 根据城市查询价格
        this.$store.dispatch('getWasteGroups').then(() => {
          this.active = 0;
          this.$store.dispatch('setWasteList', 0);
        });
      },
      back() {
        this.$router.go(-1);
      },
      priceInformationAlert() {
        this.$dialog.alert({
          title: '废品查价',
          message: '废品价格来自市场交易数据，并不作为最终交易成交价',
          confirmButtonText: '关闭'
        });
      },
      /*
      * @author JinHang
      * @description 点击tab切换废品类
      * @param { number } index 每一类的索引，用来取出它们的children
      * @return 无
      * @date 2018/6/21 10:26
      * */
      changeWasteType(index) {
        this.active = index;
        this.$store.dispatch('setWasteList', index);
      },
      /*
      * @author JinHang
      * @description 废品右侧增加按钮，将这个废品加入将要卖的废品列表
      * @param { object } waste 当前的废品
      * @return 无
      * @date 2018/6/21 10:27
      * */
      addWasteToSaleList(waste) {
        this.$store.dispatch('addWasteToSaleList', waste);
      },
      /*
      * @author JinHang
      * @description 废品右侧删除按钮，将这个废品从将要卖的废品列表中删除
      * @param { number } index 当前废品的索引
      * @return 无
      * @date 2018/6/21 10:29
      * */
      delWasteFromSaleList(waste) {
        this.$store.dispatch('delWasteFromSaleList', waste);
      }
    }
  };
</script>

<style scoped lang="less">

  [class*=van-hairline]::after {
    border-color: #b2b2b2;
  }

  .price_box {
    margin-top: 30px;
  }

  .price_tip_tabs {
    height: 100%;
    overflow-y: scroll;
    float: left;
    // padding-bottom: 170px;
    .price_tip_tabs_item {
      position: relative;
      width: 160px;
      height: 100px;
      border-left: 3px solid transparent;
      font-size: 32px;
      text-align: center;
      line-height: 100px;
      &.active {
        border-left-color: #ff9105;
        background-color: #fff;
      }
    }
  }

  .price_left_arrow {
    top: 45px;
    left: 0;
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 8px solid #ff9105;
    border-bottom: 5px solid transparent;
  }

  .price_tip_tab_content {
    height: 100%;
    overflow-y: scroll;
    margin-left: 160px;
    padding: 30px 0 0 25px;
    background-color: #fff;
    .price_tip_tab_content_item {
      height: 146px;
      margin-bottom: 30px;
      padding-bottom: 30px;
      border-bottom: 1px solid #e1e1e1;
      .item_img {
        width: 109px;
        height: 116px;
        border: 1px solid #e1e1e1;
        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
      }
      .item_text_container {
        width: 340px;
        margin-left: 10px;
        .text_title {
          line-height: 30px;
          margin-bottom: 15px;
          color: #333;
          font-size: 30px;
        }
        .text_tip {
          line-height: 26px;
          margin-bottom: 10px;
          color: #5c5c5c;
          font-size: 26px;
        }
      }
      .item_handle_container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        margin-right: 30px;
        .icon-jia,
        .icon-jian {
          color: #4694ff;
          font-size: 45px;
        }
      }
    }
  }

</style>